<template>
    <el-row :gutter="20">
        <el-col :span="12" :offset="0">
            <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top:10px">
                <template #header>
                    <div class="card-header">
                        <span>关键字搜索</span>
                    </div>
                </template>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <p>搜索用户数</p>
                        <p>113,918</p>
                        <v-chart :option="getOption1()" style="height: 150px"></v-chart>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <p>搜索量</p>
                        <p>214,215</p>
                        <v-chart :option="getOption1()" style="height: 150px"></v-chart>
                    </el-col>

                    <el-table :data="arr" border stripe style="margin-top: 10px">
                        <el-table-column label="排名">
                            <template #="{ row, $index }">
                                {{ (currentPage - 1) * pageSize + $index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column label="关键字" prop="word"> </el-table-column>
                        <el-table-column label="搜索数量" prop="count"> </el-table-column>
                        <el-table-column label="搜索用户" prop="user"> </el-table-column>
                        <el-table-column label="搜索占比">
                            <template #="{ row, $index }">
                                {{ parseInt((row.user / row.count) * 100) + "%" }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页器 -->
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        layout="prev, pager, next" :total="45" background>
                        :pager-count="7">
                    </el-pagination>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="12" :offset="0">
            <el-card class="box-card" style="margin-top: 10px">
              <template #header>
                <div class="card-header">
                  <span>分类销售</span>
                  <el-radio-group v-model="radio" size="small">
                    <el-radio-button label="品类" />
                    <el-radio-button label="商品" />
                  </el-radio-group>
                </div>
              </template>
      
              <v-chart style="height: 515px" :option="pieOption()" @mouseover="overHandler"></v-chart>
            </el-card>
          </el-col>
    </el-row>

</template>

<script setup lang="ts">
import { ref ,watch,reactive} from 'vue'
//当前第几页
let currentPage = ref<number>(1);
let pageSize = ref<number>(5);
    let radio = ref("品类");
    let arr = ref([]);
    //存储饼图中间需要展示的数据
let pieObj = reactive({
     name:"北京",
     value:999
})

//饼图将来需要展示的数据
let pie1Arr = ref([
  { name: "北京烤鸭", value: 999 },
  { name: "狗不理", value: 123 },
  { name: "锅包肉", value: 12 },
  { name: "拍黄瓜", value: 66 },
  { name: "杀猪菜", value: 122 },
  { name: "饸饹面", value: 6 },
]);

let pie2Arr = ref([
  { name: "北京", value: 666 },
  { name: "南京", value: 233 },
  { name: "燕京", value: 122 },
  { name: "东京", value: 16 },
  { name: "吴京", value: 222 },
  { name: "戏精", value: 126 },
]);

//饼图配置项
const pieOption = () => {
  return {
    //标题
    title: {
      //主标题
      text:pieObj.name,
      //子标题
      subtext: pieObj.value,
      left: "38%",
      top: "47%",
      //文字居中
      textAlign: "center",
     //主标题的样式
     textStyle:{
       color:'yellowgreen'
     },
     //副标题
     subtextStyle:{
       color:'yellowgreen'
     }
    },
    //提示框
    tooltip: {
      trigger: "item",
    },
    //图例组件
    legend: {
      top: "40%",
      right: "0",
      //图例的方向
      orient: "vertical",
    },
    //系列:柱状图
    series: [
      {
        //系列之饼图
        type: "pie",
        //饼图宽度
        width: 350,
        //半径参数
        radius: ["30%", "60%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
         
          borderWidth: 2,
        },
        label: {
          show: true,
          color:'hotpink'
        },
        emphasis: {
          label: {
            show: true,
            fontWeight: "bold",
            fontSize: 20,
          },
        },
        labelLine: {
          show: true,
        },
        data: radio.value == "品类" ? pie1Arr.value : pie2Arr.value,
      },
    ],
    grid: {
      left: 0,
    },
  };
};

//饼图的鼠标进入事件
const overHandler = (item)=>{
   //重新赋值
   pieObj.name = item.data.name;
   pieObj.value = item.data.value;
}
//监听数据的变化
watch(
  () => props.searchWord,
  () => {
    arr.value = props.searchWord.slice(0, 5);
    console.log(arr.value);
  }
);
//监听当前页码变化
watch(currentPage, () => {
  let start = (currentPage.value - 1) * pageSize.value;
  let end = start + 5;
  arr.value = props.searchWord.slice(start, end);
});
// 小图
const getOption1 = () => {
    return {
        xAxis: {
            type: 'category',
            data: ['吃饭', '睡觉', '逛街', '打豆豆', '1', '2', '3', '4'],
            boundaryGap: false // 两边不留白
        },
        yAxis: {
            show: false
        },
        series: [
            {
                data: [100, 300, 50, 159, 100, 300, 50, 159],
                type: 'line',
                smooth: true
            },

        ],
        // 提示框
        tooltip: { trigger: 'axis' },
        // 四周距离
        grid: { left: 0, top: 0, right: 0, bottom: 0 }
    };
}
// 父组件传过来的数据
let props = defineProps(["searchWord"]);
</script>

<style scoped>
    .card-header {
        display: flex;
        justify-content: space-between;
      }
</style>